---
title: Introduction
description: HeroUI is a UI library for React that helps you build beautiful and accessible user interfaces. Created on top of Tailwind CSS and React Aria.
---

# Introduction

Welcome to the HeroUI documentation!

<CarbonAd />

## What is HeroUI?

HeroUI is a UI library for React that helps you build beautiful and accessible user interfaces. Created on top of
[Tailwind CSS](https://v3.tailwindcss.com/) and [React Aria](https://react-spectrum.adobe.com/react-aria/index.html).

HeroUI's primary goal is to streamline the development process, offering a beautiful and adaptable system design for an enhanced user experience.

---

## FAQ

### Is HeroUI a copy-paste library?

No, HeroUI is not a copy-paste library. All components are available through `npm` and can be installed individually or as a whole package.

### How is HeroUI different from TailwindCSS?

- **TailwindCSS**:

  <div className="text-default-600 dark:text-default-500">
    Tailwind CSS is a CSS Framework that provides atomic CSS classes to help you style components,
    leaving you to handle lots of other things like accessibility, component composition, keyboard
    navigation, style overrides, etc.
  </div>

- **HeroUI**:
  <div className="text-default-600 dark:text-default-500">
    HeroUI is a UI library for React that combines the power of TailwindCSS with React Aria to
    provide complete components (logic and styles) for building accessible and customizable user
    interfaces. Since HeroUI uses TailwindCSS as its style engine, you can use all TailwindCSS
    classes within your HeroUI components, ensuring optimal compiled CSS size.
  </div>

### How is HeroUI different from TailwindCSS components libraries?

<div className="text-default-600 dark:text-default-500">
  TailwindCSS components libraries such as [TailwindUI](https://tailwindui.com/),
  [Flowbite](https://flowbite.com/), or [Preline](https://preline.co/), just to name a few, only offer a curated selection of TailwindCSS classes to style your components.
  They don't provide any React specific components, logic, props, composition, or accessibility features.<br/>
  <Spacer y={2}/>
  In contrast to these libraries, HeroUI is a complete UI library that provides a set of accessible and
  customizable components, hooks, and utilities.
</div>

### How HeroUI deals with TailwindCSS classes conflicts?

<div className="text-default-600 dark:text-default-500">
  We created a TailwindCSS utility library called [tailwind-variants](https://www.tailwind-variants.org/) that automatically handles TailwindCSS class conflicts. This ensures your custom classes will
  consistently override the default ones, eliminating any duplication.
</div>

### Does HeroUI use runtime CSS?

<div className="text-default-600 dark:text-default-500">
  No. As HeroUI uses TailwindCSS as its style engine, it generates CSS at build time, eliminating
  the need for runtime CSS. This means that HeroUI is fully compatible with the latest React and
  Next.js versions.
</div>

### Does HeroUI support TypeScript?

<div className="text-default-600 dark:text-default-500">
  Yes, HeroUI is written in TypeScript and has full support for it.
</div>

### Can I use HeroUI with other front-end frameworks or libraries, such as Vue or Angular?

<div className="text-default-600 dark:text-default-500">
  No, HeroUI is specifically designed for React as it is built on top of React Aria. However, you
  can still use the HeroUI components styling part with other frameworks or libraries.
</div>

### Why does HeroUI use Framer Motion?

<div className="text-default-600 dark:text-default-500">
  We use [Framer Motion](https://www.framer.com/motion) to animate some components due to
  the complexity of the animations and their physics-based nature. Framer Motion allows us to
  handle these animations in a more straightforward and performant way. In addition, it is
  well tested and production ready.
</div>

---

## Community

We're excited to see the community adopt HeroUI, raise issues, and provide feedback.
Whether it's a feature request, bug report, or a project to showcase, please get involved!

<Community />

## Contributing

PRs on **HeroUI** are always welcome, please see our [contribution guidelines](https://github.com/heroui-inc/heroui/blob/main/CONTRIBUTING.md) to learn how you can contribute to this project.

<Spacer y={4}/>